import React, { useState } from "react";
import { Avatar } from "../../../components/avatar/avatar";
import { EditIcon } from "./EditIcon";
import "./group-base-info.scss";
import { Button, Input, message, Upload } from "tea-component";
import { modifyGroupInfo } from "../../../api";
import { ConfirmDialog, ConfirmDialogRecordsType } from "./ConfirmDialog";
import { useDialogRef } from "../../../utils/react-use/useDialog";
import Toast from "../../../components/toast/Toast";

const GROUP_TYPE_MAP = {
  0: "陌生人社交群(Public)",
  1: "好友工作群(Work)",
  5: "社交群(ChatRoom)",
};

export const GroupBaseInfo = (props: {
  groupAvatar: string;
  groupName: string;
  groupId: string;
  groupType: number;
  userIdentity: number;
  onRefresh: () => Promise<any>;
}): JSX.Element => {
const { groupAvatar, groupId,groupName,userIdentity,groupType,onRefresh} = props;
const canEdit =groupType === 1 || [300, 400].includes(userIdentity);
const [isEdit, setIsEdit] = useState(false);
const [uploading, setUploading] = useState(null);
const [gourpurl,setGroupUrl] = useState(groupAvatar);
const [input, setInput] = useState(groupName);
const dialogRef = useDialogRef<ConfirmDialogRecordsType>();

function handleStart() {
    setUploading(true);
}
const handleModify = async () => {
  await modifyGroupInfo({
    groupId,
    modifyParams: {
      group_modify_info_param_group_name: input,
    },
  });
};
async function  handleSuccess(result, { file }) {
    console.log(result);
    const params: any = {};
    params. group_modify_info_param_face_url =result.data.allPath;
    await modifyGroupInfo({
      groupId: groupId,
      modifyParams: params,
    });
    setGroupUrl(result.data.allPath);
    setUploading(false);
}

function handleError(error, { file }) {
    message.error(error);
    setUploading(false);
}
function handleInput() {
  dialogRef.current.open({
    description: `是否将群名称修改为`,
    modifyContent: input,
    onConfirm: handleModify,
  });
}
  return (
    <>
      <div className="group-base-info">
            <Upload action={Toast.defaultser +"/api/app/file/uploadImage" } accept={["image/jpeg","image/png"]} maxSize={2048 * 2048}
             onStart={handleStart}  onSuccess={handleSuccess}  onError={handleError}>
              {({ open }) => (
                <div onClick={()=>{if(canEdit&&!uploading) open()} }>
                  <Avatar url={gourpurl} groupID={groupId} />
                </div>
              )}
            </Upload>
        <div className="group-base-info--text">
          <div>
            <span className="group-base-info--text__name">{groupName}</span>
            {canEdit && ( <EditIcon  onClick={() =>setIsEdit(!isEdit)} /> ) }
          </div>
          {isEdit ? (
                    <div className="group-accountecment--box">
                      <Input  className="group-introduction--input"  placeholder="输入后群名称后按回车进行设置"  value={input}
                            onChange={(value) => {setInput(value);}}/>
                      <Button type="weak"  onClick={handleInput}>保存</Button>
                    </div>
        ) : (
          <span className="group-base-info--text__type"> {GROUP_TYPE_MAP[groupType] || ""}</span>
        )}
         
        </div>
      </div>
      <ConfirmDialog  dialogRef={dialogRef}  onSuccess={() => {
          onRefresh();
          setIsEdit(false);
        }}
      />
    </>
  );
};
